<template>
    <div class="home-container">
      <Header :navItems="navItems" />
      <Banner :profile="profile" />
      <Works :works="filteredWorks" :categories="categories" @filter="filterWorks" />
      <About :profile="profile" />
      <Footer :profile="profile" />
    </div>
  </template>
  
  <script setup>
  import { ref, computed, onMounted } from 'vue';
  import Header from './components/Header.vue';
  import Banner from './components/Banner.vue';
  import Works from './components/Works1.vue';
  import About from './components/About.vue';
  import Footer from './components/Footer.vue';
  
  // 导入数据
  import profileData from './data/profile.json';
  import worksData from './data/works.js';
  
  // 初始化数据
  const profile = ref(profileData);
  const works = ref(worksData);
  const selectedCategory = ref('all');
  
  // 导航菜单项
  const navItems = [
    { id: 'home', label: '首页', path: '#banner' },
    { id: 'works', label: '作品', path: '#works' },
    { id: 'about', label: '关于我', path: '#about' },
    { id: 'contact', label: '联系方式', path: '#footer' }
  ];
  
  // 获取所有分类
  const categories = computed(() => {
    const allCategories = works.value.map(work => work.category).flat();
    const uniqueCategories = [...new Set(allCategories)];
    return ['all', ...uniqueCategories];
  });
  
  // 过滤作品
  const filteredWorks = computed(() => {
    if (selectedCategory.value === 'all') {
      return works.value;
    }
    return works.value.filter(work => 
      work.category.includes(selectedCategory.value)
    );
  });
  
  // 设置过滤类别
  const filterWorks = (category) => {
    selectedCategory.value = category;
  };
  
  // 页面加载动画
  onMounted(() => {
    // 可以添加页面加载动画或特效
    document.title = profile.value.name + ' - 个人作品展示';
  });
  </script>
  
  <style lang="scss">
  @import './styles/variables.scss';
  @import './styles/animations.scss';
  @import './styles/responsive.scss';
  
  .home-container {
    width: 100%;
    max-width: 1440px;
    margin: 0 auto;
    font-family: $font-family;
    color: $text-color;
    background-color: $bg-color;
    overflow-x: hidden;
  }
  </style>